<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>获取笑话</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input
        type="button"
        value="点击我，可以获取笑话哦"
        class="get"
        @click="getJoke"
      />
      <ul>
        <li v-for="(item, index) in jokeList" :key="index">
          {{ item }}
          <hr />
        </li>
      </ul>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        jokeList: [],
        arr: ['你好', '世界'],
      },
      created() {
        axios
          .get('https://autumnfish.cn/api/joke/list?num=3')
          .then(function(response) {
            vm.jokeList = response.data.jokes
          })
      },
      methods: {
        getJoke: function() {
          axios
            .get('https://autumnfish.cn/api/joke/list?num=3')
            .then(function(response) {
              vm.jokeList = response.data.jokes
              console.log(vm.jokeList)
            })
        },
      },
    })
  </script>
</html>
